<template>
	<view class="B">
		<view class="content">
			<view class="content-font">
				<text class="content-span">用户名</text>
				<text class="content-tips" v-show="tipsB.phoneNumber == 1">请输入手机号</text>
				<text class="content-tips" v-show="tipsB.phoneNumber == 2">手机号格式不正确</text>
				<text class="content-tips" v-show="tipsB.phoneNumber == 3" style="color: green;font-size: 16px;">✔</text>
			</view>
			<view class="content-input">
				<input type="number" v-model="userB.phoneNumber" @blur="blurUser" placeholder="请输入手机号"/>
			</view>
		</view>
		<view class="content">
			<view class="content-font">
				<text class="content-span">密码</text>
				<text class="content-tips" v-show="tipsB.password1 == 1">请输入密码</text>
				<text class="content-tips" v-show="tipsB.password1 == 2">密码长度或格式不正确</text>
				<text class="content-tips" v-show="tipsB.password1 == 3" style="color: green;font-size: 16px;">✔</text>
			</view>
			<view class="content-input">
				<input class="aaaaaa" v-model="userB.password1" :type="iconChange == 1 ? 'password' : 'text'" maxlength="16" @focus="focusPassword" @blur="blurPassword1" placeholder="请设置8~16位密码" />
				<view class="iconfont iconzhengyan" v-show="iconChange == 1" @click="clickChange(0)"></view>
				<view class="iconfont iconbiyan" v-show="iconChange == 0" @click="clickChange(1)"></view>
			</view>
		</view>
		<view class="content">
			<view class="content-font">
				<text class="content-span">确认密码</text>
				<text class="content-tips" v-show="tipsB.password2 == 1">密码不正确</text>
				<text class="content-tips" v-show="tipsB.password2 == 3" style="color: green;font-size: 16px;">✔</text>
			</view>
			<view class="content-input">
				<input class="aaaaaa" v-model="userB.password2" :type="iconChange == 1 ? 'password' : 'text'" @blur="blurPassword2" maxlength="16" placeholder="请再次输入密码" />
				<view class="iconfont iconzhengyan" v-show="iconChange == 1" @click="clickChange(0)"></view>
				<view class="iconfont iconbiyan" v-show="iconChange == 0" @click="clickChange(1)"></view>
			</view>
		</view>
		<view class="content">
			<text class="content-span">验证码</text>
			<view class="content-i">
				<view class="content-input">
					<input type="text" class="VerificationInput" :value="verificationNumber"/>
				</view>
				<view class="Verification1" @click="clickVerification" v-show="verificationChange">点此获取</view>
				<view class="Verification2" v-show="!verificationChange">等待{{verificationTime}}s</view>
			</view>
		</view>
		<view class="content">
			<view class="button" v-show="iconButton == 0" @click="clickButton">
				<view class="iconfont iconyoujiantou"></view>
			</view>
			<view class="button" v-show="iconButton == 1" style="background-color: #6C6C6C;">
				<view class="iconfont iconyoujiantou"></view>
			</view>
		</view>
	</view>
</template>

<script>
import { login, register } from '../../../request/api.js'
export default {
	name: 'LoginB',
	data() {
		return {
			iconChange: 1,
			iconButton: 1,
			verificationNumber: '',
			verificationChange: 1,
			verificationTime: 30,
			userB: {
				phoneNumber: '',
				password1: '',
				password2: ''
			},
			tipsB: {
				phoneNumber: 0,
				password1: 0,
				password2: 0
			}
		}
	},
	watch: {
		'userB.phoneNumber': {
			handler(newName, oldName) {
				var ab = /^[1][3,4,5,7,8][0-9]{9}$/;
				if(ab.test(this.userB.phoneNumber))
				{
					this.tipsB.phoneNumber = 3;
				}else{
					this.tipsB.phoneNumber = 2;
				}
				if(this.tipsB.phoneNumber == 3 && this.tipsB.password2 == 3)
				{
					this.iconButton = 0;
				}else{
					this.iconButton = 1;
				}
			},
			deep: true
		},
		'userB.password1': {
			handler(newName, oldName) {
				var ab = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$/;
				if(ab.test(newName))
				{
					this.tipsB.password1 = 3;
				}else{
					this.tipsB.password1 = 2;
				}
				if(this.userB.password2 == this.userB.password1 && this.userB.password1 != '')
				{
					this.tipsB.password2 = 3;
				}else if(this.userB.password2 == ''){
					this.tipsB.password2 = 0;
				}
				else{
					this.tipsB.password2 = 1;
				}
				if(this.tipsB.phoneNumber == 3 && this.tipsB.password2 == 3)
				{
					this.iconButton = 0;
				}else{
					this.iconButton = 1;
				}
			},
			deep: true
		},
		'userB.password2': {
			handler(newName, oldName) {
				if(newName.length >= 8 && newName == this.userB.password1)
				{
					this.tipsB.password2 = 3;
				}else{
					this.tipsB.password2 = 1;
				}
				if(this.tipsB.phoneNumber == 3 && this.tipsB.password2 == 3)
				{
					this.iconButton = 0;
				}else{
					this.iconButton = 1;
				}
			},
			deep: true
		}
	},
	onUnload() {
	
	},
	methods: {
		clickChange(e) {
			this.iconChange = e;
		},
		clickVerification() {
			if(this.tipsB.phoneNumber == 3){
				this.verificationChange = !this.verificationChange;
				var timerTimeout2 = setTimeout(() => {
					var num = Math.floor((Math.random() * 9 + 1) * 100000);
					this.verificationNumber = num;
					clearTimeout(timerTimeout2);
					timerTimeout2 = null;
				},3000)
				var timerInterval = setInterval(() => {
					this.verificationTime --;
				},1000);
				var timerTimeout = setTimeout(() => {
					this.verificationChange = !this.verificationChange;
					this.verificationTime = 30;
					clearInterval(timerInterval);
					timerInterval = null;
					clearTimeout(timerTimeout);
					timerTimeout = null;
				},30000);
			}else if(this.userB.phoneNumber == '')
			{
				this.tipsB.phoneNumber = 1;
			}
		},
		blurUser() {
			if(this.userB.phoneNumber == '')
			{
				this.tipsB.phoneNumber = 1;
			}
		},
		focusPassword() {
			if(this.userB.phoneNumber == '')
			{
				this.tipsB.phoneNumber = 1;
			}
		},
		blurPassword1() {
			if(this.userB.password1 == '')
			{
				this.tipsB.password1 = 1;
			}
		},
		blurPassword2() {
			if(this.userB.password2 == '')
			{
				this.tipsB.password2 = 1;
			}
		},
		clickButton() {
			if(this.verificationNumber == '')
			{
				uni.showToast({
					title: '请输入验证码',
					duration: 2000,
					image: '../../static/img/cuowu1.png'
				})
			}else if(this.verificationNumber == this.verificationNumber)
			{	
				register({
					username: this.userB.phoneNumber,
					password: this.userB.password1,
					repassword: this.userB.password2
				}).then(res => {
					utils.setStorageData('token',{
							username: this.userB.phoneNumber,
							password: this.userB.password1,
						}).then(res => {
							this.dataInit(this.userB.phoneNumber)
						})
					})
			}
			else{
				uni.showToast({
					title: '验证码错误',
					duration: 2000,
					image: '../../static/img/cuowu1.png'
				})
			}
		},
		dataInit(userID) {
			uni.showLoading({
				title: '加载中'
			})
			//测试数据
			if(userID == '15092095518')
			{
				utils.setStorageData(userID+'userInfo',{
					portrait: "/static/img/user/man.png",
					petName: "lemo",
					opportunity: true,
					briefIntroduction: "没有什么",
					name: "毛智超",
					sex: "男",
					birthday: "1997-04-29",
					constellation: "金牛座",
					emotionalState: "单身",
					address: "山东",
					hometown: "",
					school: [],
					company: ''
				});
				utils.setStorageData(userID+'dynamics',{
					dynamics:[{
						content: '正在更新...',
						imgUrl:'/static/img/dynamics/111.png',
						label: '官方公告',
						browse: 112,
						comment: 58,
						fabulous: 101
					}]
				})
				utils.setStorageData(userID+'follow',{
					follow:[
						{
							petName: 'neoo',
							portrait: '../static/img/user/woman.png',
							personalProfile: '阿打算打算发顺丰三法师'
						}
					]
				})
				utils.setStorageData(userID+'fans',{
					fans:[{
						petName: 'neoo',
						portrait: '../static/img/user/woman.png',
						personalProfile: '阿打算打算发顺丰三法师'
					}]
				})
				utils.setStorageData(userID+'authentication',{
					authentication:[]
				})
			}
			else if(userID == "13070848717") {
				utils.setStorageData(userID+'userInfo',{
					portrait: "/static/img/user/woman.png",
					petName: "neoo",
					opportunity: true,
					briefIntroduction: "没有什么849",
					name: "王帅",
					sex: "女",
					birthday: "1998-05-16",
					constellation: "天秤座",
					emotionalState: "恋爱中",
					address: "山东",
					hometown: "",
					school: [],
					company: ''
				});
				utils.setStorageData(userID+'dynamics',{
					dynamics:[{
						content: '正在维护...',
						imgUrl:'/static/img/dynamics/111.png',
						label: '官方公告',
						browse: 98,
						comment: 35,
						fabulous: 82
					}]
				})
				utils.setStorageData(userID+'follow',{
					follow:[
						{
							petName: 'lemo',
							portrait: '../static/img/user/man.png',
							personalProfile: '没有什么'
						}
					]
				})
				utils.setStorageData(userID+'fans',{
					fans:[{
						petName: 'neoo',
						portrait: '../static/img/user/man.png',
						personalProfile: '没有什么'
					}]
				})
				utils.setStorageData(userID+'authentication',{
					authentication:[]
				})
			}
			if(!utils.getStorageData(userID+'userInfo')){
				utils.setStorageData(userID+'userInfo',{
					portrait: "/static/img/user/man.png",
					petName: "默认昵称",
					opportunity: true,
					briefIntroduction: "",
					name: "默认昵称",
					sex: "保密",
					birthday: "",
					constellation: "",
					emotionalState: "",
					address: "",
					hometown: "",
					school: [],
					company: ''
				})
			}
			if(!utils.getStorageData(userID+'dynamics')){
				utils.setStorageData(userID+'dynamics',{
					dynamics:[{
						content: '',
						imgUrl:'',
						label: '',
						browse: 0,
						comment: 0,
						fabulous: 0
					}]
				})
			}
			if(!utils.getStorageData(userID+'follow')){
				utils.setStorageData(userID+'follow',{
					follow:[
						{
							petName: '',
							portrait: '',
							personalProfile: ''
						}
					]
				})
			}
			if(!utils.getStorageData(userID+'fans')){
				utils.setStorageData(userID+'fans',{
					fans:[{
						petName: '',
						portrait: '',
						personalProfile: ''
					}]
				})
			}
			if(!utils.getStorageData(userID+'authentication')){
				utils.setStorageData(userID+'authentication',{
					authentication:[]
				})
			}
			wx.hideLoading();
			setTimeout(()=>{
				uni.redirectTo({
					url: '../../pages/homePage'
				});
			},100)
		}
	}
}
</script>

<style>
	.B{
		height: 600rpx;
		margin-top: 26rpx;
	}
	.content{
		margin-bottom: 20rpx;
	}
	.content-font{
		width: auto;
		margin-right: 100rpx;
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		height: 40rpx;
	}
	.content-span{
		color: #5B5B5B;
		font-size: 32rpx;
		margin-left: 60rpx;
		letter-spacing:2rpx;
	}
	.content-tips{
		color: red;
		font-size: 24rpx;
	}
	.content-i{
		display: flex;
		align-items: center;
	}
	.content-input{
		height: 66rpx;
		border: 2px solid #FE6542;
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		width: auto;
		margin-right: 100rpx;
		margin-left: 60rpx;
		margin-top: 10rpx;
	}
	input{
		font-size: 34rpx;
		caret-color: #FE6542;
		text-indent: 20rpx; 
		letter-spacing: 0.4rpx;
		flex: 1;
	}
	.aaaaaa{
		font-size: 32rpx;
		caret-color: #FE6542;
		text-indent: 6rpx; 
		letter-spacing: 0.4rpx;
		flex: 1;
		height: 62rpx;
		outline: none;
		border: none;
		margin-left: 10rpx;
		font-family: '微软雅黑';
	}
	.VerificationInput{
		letter-spacing: 3rpx;
	}
	.Verification1{
		font-size: 28rpx;
		margin-right: 140rpx;
		width: 160rpx;
		height: 66rpx;
		background-color: #FE6542;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 6rpx;
		letter-spacing: 1.6rpx;
	}
	.Verification2{
		font-size: 28rpx;
		margin-right: 140rpx;
		width: 160rpx;
		height: 66rpx;
		background-color: #979797;
		color: #333333;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 6rpx;
	}
	.iconzhengyan, .iconbiyan{
		font-size: 40rpx;
		margin-right: 14rpx;
	}
	.iconbiyan{
		width: 48rpx;
	}
	.button{
		width: 80rpx;
		height: 80rpx;
		background-color: #FE6542;
		border-radius: 20rpx;
		margin: 0 auto;
		margin-top: 90rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #fff;
	}
	.iconyoujiantou{
		font-size: 50rpx;
		font-weight: 550;
	}
</style>
